<template >
  <el-main class="image-main" v-loading="loading">
    <div class="top p-3 bg-gray-100">

      <el-row :gutter="10">
        <el-col :span="6" :offset="0" v-for="(item, index) in list" :key="index">
          <el-card shadow="hover" class="relative mb-3" :body-style="{ 'padding': 0 }"
            :class="{ 'border-blue-500': item.checked }">
            <el-image :src="item.url" fit="cover" class="h-[150px]" :preview-src-list="[item.url]" :initial-index="0">
            </el-image>
            <div class="image-title">{{ item.name }}</div>
            <div class="flex items-center justify-center p-2">

              <el-checkbox v-if="openChoose" v-model="item.checked" @change="handleChooseChange(item)"></el-checkbox>

              <el-button type="primary" size="small" text @click="handleEdit(item)">重命名</el-button>

              <el-popconfirm title="是否要删除该图片?" confirm-button-text="确认" cancel-button-text="取消"
                @confirm="handleDelete(item.id)">
                <template #reference>
                  <el-button type="primary" size="small" text>删除</el-button>
                </template>
              </el-popconfirm>

            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="bottom">
      <el-pagination background layout="prev,pager, next" :total="total" :current-page="currentPage" :page-size="limit"
        @current-change="getData" />
    </div>
  </el-main>

  <el-drawer v-model="drawer" title="上传图片">
    <UploadFile :data="imageClassId" @success="handleUploadSuccess"></UploadFile>
  </el-drawer>
</template>

<script setup>

import { ref, computed } from 'vue'
import { getImageList, updateImage, deleteImage } from '~/api/image.js';
import { showPrompt, toast } from '~/composables/util.js'
import UploadFile from "~/components/UploadFile.vue"

// 上传图片
const drawer = ref(false)
// 打开弹窗方法
const openUploadFile = () => drawer.value = true

// 分页
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const list = ref([])
const loading = ref(false)
const imageClassId = ref(0)
// 获取数据
function getData(p = null) {
  if (p === 'number') {
    currentPage.value = p
  }
  loading.value = true
  getImageList(imageClassId.value, currentPage.value)
    .then(res => {
      total.value = res.totalCount
      list.value = res.list.map(o => {
        o.checkbox = false
        return o
      })
    })
    .finally(() => {
      loading.value = false
    })
}

// 根据分类ID重新加载图片列表
const loadData = (id) => {
  currentPage.value = 1
  imageClassId.value = id
  getData()
}
// 图片重命名
const handleEdit = (item) => {
  showPrompt("重命名", item.name)
    .then(({ value }) => {
      loading.value = true
      updateImage(item.id, value).then(res => {
        toast("修改成功")
        getData()
      }).finally(() => {
        loading.value = false
      })
    })
}

// 删除图片
const handleDelete = (id) => {
  loading.value = true
  deleteImage([id])
    .then(res => {
      toast("删除成功")
      // 重新获取当前图片列表的数据
      getData()
    })
    .finally(() => {
      loading.value = false
    })
}

// 上传成功
const handleUploadSuccess = () => getData(1)

const props = defineProps({
  openChoose: {
    type: Boolean,
    default: false
  },
  limit: {
    type: Number,
    default: 1

  }
})

// 选中的图片
const emit = defineEmits(['choose'])
const changedImage = computed(() => list.value.filter(o => o.checked))

// 限制只能选择一张图片
const handleChooseChange = (item) => {
  if (item.checked && changedImage.value.length > props.limit) {
    item.checked = false // 把当前选中的设置为false
    return toast(`最多只能选中${props.limit}张图片`, "error")
  }
  emit("choose", changedImage.value) // 传回父组件
}

// 将方法传回给父组件
defineExpose({
  loading,
  loadData,
  openUploadFile
})

</script>

<style scoped>
.image-main {
  position: relative;
}

.image-main .top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}

.image-main .bottom {
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  @apply flex items-center justify-center;
}

.image-title {
  position: absolute;
  top: 122px;
  left: -1px;
  right: -1px;
  @apply text-sm truncate text-gray-100 bg-opacity-50 bg-gray-800 px-2 py-1;
}
</style>